<template>
  <div class="table_list">
    <!-- 头部 -->
    <div class="header-menulist">
      <div class="header-menu-one">
        <i class="el-icon-s-claim" />
        <span class="kp">入库开票</span>
      </div>
      <div class="header-menu-one" @click="uploadFileTable = true">
        <el-button type="mini" icon="el-icon-bottom">导入</el-button>
      </div>
      <div class="header-menu-one">
        <el-button type="mini" icon="el-icon-search">提取</el-button>
      </div>
      <div class="header-menu-one">
        <el-button type="mini" icon="el-icon-check">保存</el-button>
      </div>
    </div>
    <!-- 表单查询搜索 :rules="editFormRules" -->
    <div class="form-searchlist">
      <el-form :inline="true">
        <el-form-item label="医院名称" prop="name">
          <el-select v-model="formInline.name" placeholder="医院名称" size="mini">
            <el-option label="天长市智慧医疗共体" value="shanghai" />
            <el-option label="天长市智慧医疗共体2" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="业务日期" prop="name">
          <el-date-picker v-model="value1" type="date" placeholder="业务日期" size="mini" />
        </el-form-item>

        <el-form-item label="供应商" prop="name">
          <el-select v-model="formInline.name" placeholder="供应商" size="mini">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="操作人" prop="name">
          <el-input v-model="formInline.name" placeholder="备注" size="mini" />
        </el-form-item>

        <el-form-item label="配方间" prop="name">
          <el-select v-model="formInline.name" placeholder="配方间" size="mini">
            <el-option label="2002|天长配方间" value="shanghai" />
            <el-option label="2002|天长配方间2" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="单据编号" prop="name">
          <el-input v-model="formInline.name" placeholder="单据编号" size="mini" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formInline.name" placeholder="备注" size="mini" />
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表 -->
    <div class="main-table">
      <el-table
        v-loading="listLoading"
        :data="users"
        highlight-current-row
        style="width: 100%"
        :header-cell-style="{ background: '#f7f3ee' }"
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="name" label="饮片编码" width="120">
          <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect"
          />
        </el-table-column>
        <el-table-column prop="sex" label="饮片名称" width="100" />
        <el-table-column prop="age" label="单位" width="100" />
        <el-table-column prop="birth" label="饮片规格" width="120" />
        <el-table-column prop="addr" label="批属性编号" min-width="180" />
        <el-table-column prop="addr" label="批属性名称" min-width="180" />
        <el-table-column prop="addr" label="批号" min-width="180" />
        <el-table-column prop="addr" label="批属性入库数量" min-width="180" />
        <el-table-column prop="addr" label="系统入库数量" min-width="180" />
        <el-table-column prop="addr" label="批属性单位" min-width="180" />
        <el-table-column prop="addr" label="成本价" min-width="180" />
        <el-table-column prop="addr" label="零售价" min-width="180" />
        <el-table-column prop="addr" label="生产日期" min-width="180" />
        <el-table-column prop="addr" label="有效期" min-width="180" />
        <el-table-column prop="addr" label="产地" min-width="180" />
        <el-table-column prop="addr" label="生产厂家" min-width="180" />
        <el-table-column prop="addr" label="换算系数" min-width="180" />

        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="main-page">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
      <div class="main-bottom">
        <div class="bottom-btn">
          <el-button type="mini" icon="el-icon-plus" class="tianjia">添加</el-button>
        </div>
        <div class="bottom=right">
          <span>合计成本价总计：0</span>
          <span>系统入库数量总计：0</span>
          <span>批属性入库数量总计：0</span>
          <span>合计零售价总计：0</span>
        </div>
      </div>
    </div>
    <!--编辑界面-->
    <el-dialog
      title="要货入库开票导入"
      :close-on-click-modal="false"
      :visible.sync="uploadFileTable"
    >
      <div class="upfile-stepone">
        第一步：<span class="upfile-upderline">下载Excel模板</span>
        下载Excel模板，按模板填入要货入库开票
      </div>
      <div class="upfile-stepone">
        第二步：
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="mini" type="primary" icon="el-icon-upload">点击上传</el-button>
        </el-upload>
        上传已填写的excel模板文件
      </div>
      <el-table
        v-loading="listLoading"
        :data="users"
        highlight-current-row
        style="width: 100%"
        :header-cell-style="{ background: '#f7f3ee' }"
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="name" label="饮片编码" width="120" />
        <el-table-column prop="sex" label="饮片名称" width="100" />
        <el-table-column prop="age" label="单位" width="100" />
        <el-table-column prop="birth" label="批属性编号" width="120" />
        <el-table-column prop="addr" label="批属性名称" min-width="180" />
        <el-table-column prop="addr" label="批号" min-width="180" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="mini" :loading="editLoading" @click.native="uploadFileTable = false">
          提 交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import util from '../../common/util'
import { getStockBillList } from '../../../api/decoction'

export default {
  name: 'AddInvoicing',
  data() {
    return {
      restaurants: [],
      state: '',
      timeout: null,
      filters: {
        name: '',
      },
      formInline: {
        user: '',
        region: '',
      },
      users: [],
      total: 0,
      page: 1,
      listLoading: false,
      editFormVisible: false, // 编辑界面显是否显示
      editFormTtile: '编辑', // 编辑界面标题
      // 编辑界面数据
      editForm: {
        id: 0,
        name: '',
        sex: -1,
        age: 0,
        birth: '',
        addr: '',
      },
      editLoading: false,
      btnEditText: '提 交',
      value1: '',
      fileList: [],
      uploadFileTable: false,
      currentPage: 1,
    }
  },
  mounted() {
    this.gethhh()
    this.restaurants = this.loadAll()
  },
  methods: {
    gethhh() {
      let param = {
        type: 1,
      }
      getStockBillList({ param }).then(res => {
        console.log('111111111', res)
      })
    },
    loadAll() {
      return [
        { value: '三全鲜食（北新泾店）', address: '长宁区新渔路144号' },
        {
          value: 'Hot honey 首尔炸鸡（仙霞路）',
          address: '上海市长宁区淞虹路661号',
        },
        {
          value: '新旺角茶餐厅',
          address: '上海市普陀区真北路988号创邑金沙谷6号楼113',
        },
        { value: '泷千家(天山西路店)', address: '天山西路438号' },
        {
          value: '胖仙女纸杯蛋糕（上海凌空店）',
          address: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101',
        },
        { value: '贡茶', address: '上海市长宁区金钟路633号' },
        {
          value: '豪大大香鸡排超级奶爸',
          address: '上海市嘉定区曹安公路曹安路1685号',
        },
        {
          value: '茶芝兰（奶茶，手抓饼）',
          address: '上海市普陀区同普路1435号',
        },
        { value: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
        { value: '星移浓缩咖啡', address: '上海市嘉定区新郁路817号' },
        { value: '阿姨奶茶/豪大大', address: '嘉定区曹安路1611号' },
        { value: '新麦甜四季甜品炸鸡', address: '嘉定区曹安公路2383弄55号' },
        {
          value: 'Monica摩托主题咖啡店',
          address: '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F',
        },
        {
          value: '浮生若茶（凌空soho店）',
          address: '上海长宁区金钟路968号9号楼地下一层',
        },
        { value: 'NONO JUICE  鲜榨果汁', address: '上海市长宁区天山西路119号' },
        { value: 'CoCo都可(北新泾店）', address: '上海市长宁区仙霞西路' },
        {
          value: '快乐柠檬（神州智慧店）',
          address: '上海市长宁区天山西路567号1层R117号店铺',
        },
        {
          value: 'Merci Paul cafe',
          address: '上海市普陀区光复西路丹巴路28弄6号楼819',
        },
        {
          value: '猫山王（西郊百联店）',
          address: '上海市长宁区仙霞西路88号第一层G05-F01-1-306',
        },
        { value: '枪会山', address: '上海市普陀区棕榈路' },
        { value: '纵食', address: '元丰天山花园(东门) 双流路267号' },
        { value: '钱记', address: '上海市长宁区天山西路' },
        { value: '壹杯加', address: '上海市长宁区通协路' },
        {
          value: '唦哇嘀咖',
          address: '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元',
        },
        { value: '爱茜茜里(西郊百联)', address: '长宁区仙霞西路88号1305室' },
        {
          value: '爱茜茜里(近铁广场)',
          address: '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺',
        },
        {
          value: '鲜果榨汁（金沙江路和美广店）',
          address: '普陀区金沙江路2239号金沙和美广场B1-10-6',
        },
        {
          value: '开心丽果（缤谷店）',
          address: '上海市长宁区威宁路天山路341号',
        },
        { value: '超级鸡车（丰庄路店）', address: '上海市嘉定区丰庄路240号' },
        { value: '妙生活果园（北新泾店）', address: '长宁区新渔路144号' },
        { value: '香宜度麻辣香锅', address: '长宁区淞虹路148号' },
        {
          value: '凡仔汉堡（老真北路店）',
          address: '上海市普陀区老真北路160号',
        },
        { value: '港式小铺', address: '上海市长宁区金钟路968号15楼15-105室' },
        { value: '蜀香源麻辣香锅（剑河路店）', address: '剑河路443-1' },
        { value: '北京饺子馆', address: '长宁区北新泾街道天山西路490-1号' },
        {
          value: '饭典*新简餐（凌空SOHO店）',
          address: '上海市长宁区金钟路968号9号楼地下一层9-83室',
        },
        {
          value: '焦耳·川式快餐（金钟路店）',
          address: '上海市金钟路633号地下一层甲部',
        },
        { value: '动力鸡车', address: '长宁区仙霞西路299弄3号101B' },
        { value: '浏阳蒸菜', address: '天山西路430号' },
        { value: '四海游龙（天山西路店）', address: '上海市长宁区天山西路' },
        {
          value: '樱花食堂（凌空店）',
          address: '上海市长宁区金钟路968号15楼15-105室',
        },
        { value: '壹分米客家传统调制米粉(天山店)', address: '天山西路428号' },
        {
          value: '福荣祥烧腊（平溪路店）',
          address: '上海市长宁区协和路福泉路255弄57-73号',
        },
        {
          value: '速记黄焖鸡米饭',
          address: '上海市长宁区北新泾街道金钟路180号1层01号摊位',
        },
        { value: '红辣椒麻辣烫', address: '上海市长宁区天山西路492号' },
        {
          value: '(小杨生煎)西郊百联餐厅',
          address: '长宁区仙霞西路88号百联2楼',
        },
        { value: '阳阳麻辣烫', address: '天山西路389号' },
        {
          value: '南拳妈妈龙虾盖浇饭',
          address: '普陀区金沙江路1699号鑫乐惠美食广场A13',
        },
      ]
    },
    querySearchAsync(queryString, cb) {
      let restaurants = this.restaurants
      let results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 3000 * Math.random())
    },
    createStateFilter(queryString) {
      return state => {
        return state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    handleSelect(item) {
      console.log(item)
    },
    handleCurrentChange(val) {
      this.page = val
      this.getUsers()
    },
    // 上传
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },

    // 删除
    handleDel(row) {
      let _this = this
      this.$confirm('确认删除该记录吗?', '提示', {})
        .then(() => {
          _this.listLoading = true
          let para = {
            id: row.id,
          }
          removeUser(para).then(res => {
            _this.listLoading = false
            _this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
            })
            _this.getUsers()
          })
        })
        .catch(() => {})
    },
    // 显示编辑界面
    handleEdit(row) {
      this.editFormVisible = true
      this.editFormTtile = '编辑'
      this.editForm.id = row.id
      this.editForm.name = row.name
      this.editForm.sex = row.sex
      this.editForm.age = row.age
      this.editForm.birth = row.birth
      this.editForm.addr = row.addr
    },
    // 编辑 or 新增
    editSubmit() {
      let _this = this
      _this.$refs.editForm.validate(valid => {
        if (valid) {
          _this.$confirm('确认提交吗？', '提示', {}).then(() => {
            _this.editLoading = true
            _this.btnEditText = '提交中'
            if (_this.editForm.id == 0) {
              // 新增
              let para = {
                name: _this.editForm.name,
                sex: _this.editForm.sex,
                age: _this.editForm.age,
                birth:
                  _this.editForm.birth == ''
                    ? ''
                    : util.formatDate.format(new Date(_this.editForm.birth), 'yyyy-MM-dd'),
                addr: _this.editForm.addr,
              }
              addUser(para).then(res => {
                _this.editLoading = false
                _this.btnEditText = '提 交'
                _this.$notify({
                  title: '成功',
                  message: '提交成功',
                  type: 'success',
                })
                _this.editFormVisible = false
                _this.getUsers()
              })
            } else {
              // 编辑
              let para = {
                id: _this.editForm.id,
                name: _this.editForm.name,
                sex: _this.editForm.sex,
                age: _this.editForm.age,
                birth:
                  _this.editForm.birth == ''
                    ? ''
                    : util.formatDate.format(new Date(_this.editForm.birth), 'yyyy-MM-dd'),
                addr: _this.editForm.addr,
              }
              editUser(para).then(res => {
                _this.editLoading = false
                _this.btnEditText = '提 交'
                _this.$notify({
                  title: '成功',
                  message: '提交成功',
                  type: 'success',
                })
                _this.editFormVisible = false
                _this.getUsers()
              })
            }
          })
        }
      })
    },

    // 显示新增界面
    handleAdd() {
      let _this = this
      this.editFormVisible = true
      this.editFormTtile = '新增'
      this.editForm.id = 0
      this.editForm.name = ''
      this.editForm.sex = 1
      this.editForm.age = 0
      this.editForm.birth = ''
      this.editForm.addr = ''
    },
  },
}
</script>

<style lang="css">
.header-menulist {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background-color: #f7f3ee;
  padding: 18px 12px;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
}

.header-menu-one {
  margin-right: 10px;
}

.header-menu-one .kp {
  font-size: 16px;
}

.el-icon-s-claim {
  font-size: 16px !important;
}

.el-button--mini {
  padding: 7px 10px !important;
  background-color: #ddb279;
  border-radius: 8px !important;
  border-color: none;
}

.el-button--mini:hover,
.el-button--mini:active,
.el-button--mini:focus {
  background-color: #ddb279;
}

.el-icon-bottom,
.el-icon-search,
.el-icon-check {
  color: #fff;
}

.el-button span {
  color: #fff !important;
}
.el-button--text span {
  color: #ddb279 !important;
}
/* 表单 */
.form-searchlist {
  display: flex;
  flex-direction: row;
  padding: 18px 12px 10px;
  border: 1px solid #f7f3ee;
}

.el-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.el-form--inline .el-form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 263px;
  margin-bottom: 10px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 190px;
}

.el-form-item__label {
  width: 80px;
  font-size: 12px;
}

.main-table {
  padding: 18px 12px 10px;
  border: 1px solid #f7f3ee;
}

.el-table th.el-table__cell > .cell {
  color: #ddb279 !important;
}

.table_list_content {
  background-color: #fff;
  width: calc(100% - 24px);
  padding: 0px 12px 12px 12px;
  position: absolute;
  /* top: 550px; */
}

.main-page {
  text-align: right;
  margin-top: 10px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ddb279 !important;
}

/* 合计 */
.main-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-top: 100px;
}

.tianjia {
  background-color: antiquewhite;
}

.tianjia:hover {
  background-color: antiquewhite;
}

.tianjia span {
  color: #ddb279 !important;
}

.el-icon-plus {
  color: #ddb279;
}

/* 导入 */
.upfile-stepone {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
}

.upfile-upderline {
  color: #ddb279;
  text-decoration: underline;
}

.el-dialog__footer {
  text-align: center;
}
</style>

<style lang="scss">
@import './index';
</style>
